﻿@page "/Viewerfull"
@using AME.Services
@implements IAsyncDisposable
@inject IJSRuntime JS
@attribute [TabItemOption(Text = "图像浏览器")]

<a href="https://www.nuget.org/packages/BootstrapBlazor.Viewer#readme-body-tab"><h3>图像浏览器</h3></a>
<hr />
<a href="https://github.com/densen2014/Densen.Extensions/blob/master/Demo/DemoShared/Pages/ViewerjsFull.razor"><h5>页面源码</h5></a>

<div class="docs-galley mb-3">
    <ul id="@options.id" class="docs-pictures clearfix">
        @{
            var i = 0;
            foreach (var item in Items1)
            {
                i++;
                <li><img src="@item" alt="Picture @i"></li>
            }
        }
    </ul>
</div>
<Badge>选项</Badge>
<Row ItemsPerRow="ItemsPerRow.Three" RowType="RowType.Inline" style="max-width:600px">
    <Checkbox ShowLabel="true" @bind-Value="options.loop" OnStateChanged="OnItemChanged" />
    <Checkbox ShowLabel="true" @bind-Value="options.movable" OnStateChanged="OnItemChanged" />
    <Checkbox ShowLabel="true" @bind-Value="options.rotatable" OnStateChanged="OnItemChanged" />
    <Checkbox ShowLabel="true" @bind-Value="options.scalable" OnStateChanged="OnItemChanged" />
    <Checkbox ShowLabel="true" @bind-Value="options.navbar" OnStateChanged="OnItemChanged" />
    <Checkbox ShowLabel="true" @bind-Value="options.backdrop" OnStateChanged="OnItemChanged" />
    <Checkbox ShowLabel="true" @bind-Value="options.toggleOnDblclick" OnStateChanged="OnItemChanged" />
    <Checkbox ShowLabel="true" @bind-Value="options.button" OnStateChanged="OnItemChanged" />
    <Checkbox ShowLabel="true" @bind-Value="options.toolbar" OnStateChanged="OnItemChanged" />
    <Checkbox ShowLabel="true" @bind-Value="options.tooltip" OnStateChanged="OnItemChanged" />
    <Checkbox ShowLabel="true" @bind-Value="options.transition" OnStateChanged="OnItemChanged" />
    <Checkbox ShowLabel="true" @bind-Value="options.zoomable" OnStateChanged="OnItemChanged" />
</Row>

@code{

    List<string> Items1 { get; set; } = new List<string>();

    string id { get; set; } = "images";
    private IJSObjectReference? module;

    protected override void OnInitialized()
    {
        options = new ViewerOptions();
        //options.backdrop = false;
        //options.navbar = false;
        //options.button = false;
        //options.rotatable = false;

        for (int i = 1; i <= 9; i++)
        {
            Items1.Add($"https://fengyuanchen.github.io/viewerjs/images/thumbnails/tibet-{i}.jpg");
        }
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            module = await JS.InvokeAsync<IJSObjectReference>("import", "./_content/BootstrapBlazor.Viewer/lib/viewerjs/viewerjs.js" + "?v=" + System.Reflection.Assembly.GetExecutingAssembly().GetName().Version);
            await module.InvokeVoidAsync("initOptions", options);
        }
    }

    ViewerOptions options = new ViewerOptions();

    private async Task OnItemChanged(CheckboxState state, bool value) => await module!.InvokeVoidAsync("initOptions", options);

    async ValueTask IAsyncDisposable.DisposeAsync()
    {
        if (module is not null)
        {
            await module.DisposeAsync();
        }
    }
}

<link href="/_content/BootstrapBlazor.Viewer/lib/Viewer/viewer.min.css" rel="stylesheet" />

<style>
    .docs-galley {
        padding: 40px;
        width: 400px;
    }

    .docs-pictures {
        list-style: none;
        margin: 0;
        padding: 0;
    }

        .docs-pictures > li {
            border: 1px solid transparent;
            float: left;
            height: calc(100% / 3);
            margin: 0 -1px -1px 0;
            overflow: hidden;
            width: calc(100% / 3);
        }

            .docs-pictures > li > img {
                cursor: -webkit-zoom-in;
                cursor: zoom-in;
                width: 100%;
            }

    img {
        vertical-align: middle;
        border-style: none;
    }
</style>
